<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo.viewHeight"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">日期设置</el-divider>
      </div>
      <el-form-item label="时间格式" class="column-info">
        <el-select v-model="optionsInfo['dateInfo'].value" placeholder="请选择">
          <el-option
              v-for="item in dateTimeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['dateInfo'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['dateInfo'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['dateInfo'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">时间设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['weekTimeInfo'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['weekTimeInfo'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['weekTimeInfo'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">诊室名设置</el-divider>
      </div>

      <el-form-item label="字体颜色">
        <el-select v-model="optionsInfo['roomInfo'].roomNameKey" placeholder="请选择">
          <el-option
              v-for="item in roomInfoOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['roomInfo'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['roomInfo'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['roomInfo'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医院LOGO设置</el-divider>
      </div>
      <el-form-item label="Logo">
        <el-switch v-model="optionsInfo.logoInfo.shown"/>
      </el-form-item>
      <el-form-item label="企业Logo" class="logo-area-set">
        <el-button type="primary" @click="handleSelect('formPictureInfo',optionsInfo['logoInfo'].value)">
          选择LOGO
        </el-button>
        <div class="picture-wrap">
          <template v-if="!!optionsInfo?.logoInfo?.value.url">
            <img :src="`${optionsInfo.logoInfo.value.url}`" alt="企业Logo"/>
            <p class="icon-wrap" @click="handleDeletePicture">
              <i class="el-icon-close icon-delete"/>
            </p>
          </template>
          <template v-else>
            <div class="el-upload"
                 @click="handleSelect('formPictureInfo',optionsInfo['logoInfo'].value)">
              <i class="el-icon-plus avatar-uploader-icon"/>
            </div>
          </template>
        </div>
      </el-form-item>


    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">诊室状态设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['roomState'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['roomState'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['roomState'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生名字设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['doctorName'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['doctorName'].fontSize"
        />
      </el-form-item>
      <el-form-item label="诊室字体粗细">
        <el-select v-model="optionsInfo['doctorName'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生职称设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['doctorLevel'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['doctorLevel'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['doctorLevel'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生学历设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['doctorEducation'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['doctorEducation'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['doctorEducation'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生介绍设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['doctorIntroduce'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['doctorIntroduce'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['doctorIntroduce'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">擅长标题设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['doctorGeniusSign'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['doctorGeniusSign'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['doctorGeniusSign'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">擅长内容设置</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['doctorGenius'].fontColor"
        />
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['doctorGenius'].fontSize"
        />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['doctorGenius'].fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <!--选择图片的弹层-->
    <SelectPicture
        :info="formPictureInfo.info"
        :visible="formPictureInfo.visible"
        @handleSure="handleSure"
        @handleCancel="handleCancel"
    />


  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import DeptNameKeyEditor from "../basicInfo/deptNameKey-editor.vue";
import RoomNameKeyEditor from "../basicInfo/roomNameKey-editor.vue";
import WaitPatientTypeEditor from "../basicInfo/waitPatientType-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import UpdateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import SelectVideoText from "@c/public/layer/template/selectVideoText/index.vue";
import {roomOptions3} from "@c/public/form-designer/devType/datas-types";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";

export default {
  name: "DRCDoctorInfoConfig-editor",
  components: {
    SelectPicture,
    SelectVideoText, UpdateFormEditor, RoomNameKeyEditor, DeptNameKeyEditor, WaitPatientTypeEditor
  },
  componentName: "DRCDoctorInfoConfig-editor",
  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      optionsInfo: Object(),
      constantDic: constantDic,
      roomInfoOptions: types['roomOptions3'],
      dateTimeOptions: types["dateTimeOptions"],
      predefineColors: types['predefineColors'],
      fontWeightOptions: types["fontWeightOptions"],
      formEditorInfo: {
        info: Object(),
        visible: false
      },
      formVideoInfo: {
        info: Object(),
        visible: false,
        multiple: false,
      },
      formPictureInfo: {
        info: Object(),
        visible: false
      },
    }
  },

  computed: {
    patientEditShown() {
      return function (row) {
        let {currentPatientShown = true, waitPatientShown = true} = this.optionsInfo
        switch (row) {
          case 'current':
            return currentPatientShown
          case 'wait':
            return waitPatientShown;
        }
      }
    }
  },

  methods: {
    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      switch (val) {
        case 'formEditorInfo':
          Reflect.set(params, 'updataType', 'tipsContent');
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break;
        case 'formVideoInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'video');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'video');
          Reflect.set(params, 'multiple', false);
          let contents = Object();
          Reflect.set(contents, 'tabsName', content['tabsName']);
          Reflect.set(contents, 'textContent', content['textInfo']);
          Reflect.set(contents, 'videoContent', content['videoInfo'])
          Reflect.set(contents, 'pictureContent', content['pictureInfo'])
          // 旧的数据
          Reflect.set(params, 'content', contents);
          Reflect.set((this.formVideoInfo), 'infoContent', contents);
          Reflect.set((this.formVideoInfo), 'visible', true);
          Reflect.set((this.formVideoInfo), 'info', params);
          break;
        case 'formPictureInfo':
          Reflect.set(params, 'updataType', 'logoInfo');
          Reflect.set(params, 'content', content || '');
          Reflect.set(params, 'number', 1);
          Reflect.set((this.formPictureInfo), 'visible', true);
          Reflect.set((this.formPictureInfo), 'info', params);
          console.log((this.formPictureInfo))
          break
      }
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.formEditorInfo, 'visible', false);
      Reflect.set(this.formVideoInfo, 'visible', false)
      Reflect.set(this.formPictureInfo, 'visible', false)
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {key, val} = valInfo;
      Reflect.set((this.optionsInfo[key]), 'value', val);
    },

    // 删除图片
    handleDeletePicture(){
      Reflect.set((this.optionsInfo['logoInfo']), 'value', Object());
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 8px 0;
      }
    }
  }

}

.logo-area-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;

      img {
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

    .picture-wrap-qrcode {
      height: 80px;
      width: 80px;
      // margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;

      img {
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 80px;
        height: 80px;
        // width: 108px;
        // height: 108px;
        cursor: pointer;
        // line-height: 116px;
        line-height: 80px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          // font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}
</style>